<template>
  <view class="bill-list-container">
    <view class="bill-search">
      <uni-search-bar placeholder="请输入搜索内容" />
    </view>
    <view class="bill-tabs">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index" 
          :class="['bill-tab', activeIndex === index ? 'active' : '']"
          @click="switchTab(index)"
        >
          {{ tab.label }}
        </view>
    </view>
	<all v-if="activeIndex === 0" />
	<expense v-else-if="activeIndex === 1" />
	<recharge v-else-if="activeIndex === 2" />
	<refund v-else-if="activeIndex === 3" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import recharge from './billType/recharge.vue';
import all from './billType/all.vue';
import expense from './billType/expense.vue';
import refund from './billType/refund.vue';

const tabs = [
  { label: '全部'},
  { label: '支出'},
  { label: '充值'},
  { label: '退款'}
]

const activeIndex = ref(0)

// 切换
function switchTab(index) {
    activeIndex.value = index
    // 这里你可以触发其他逻辑，比如切换列表数据
}
</script>

<style src="./bill.css"></style> 